<template>
   <div class="addperson">
    <div class="addform">
        <form @submit.prevent="addVuex()">
            <p>
                <input type="text" placeholder="姓名" required v-model.lazy.trim="objF.uname">
            </p>
            <p>
                <input type="radio" value="0" v-model="objF.gender"><span>女</span>
                <input type="radio" value="1" v-model="objF.gender"><span>男</span>
            </p>
            <p>
                <input type="number" placeholder="年龄" required v-model.lazy.trim="objF.age">
            </p>
            <p>
                <select v-model.number="objF.port">
                    <option value="" disabled>--请选择植物--</option>
                    <option value="1">老板</option>
                    <option value="2">总经理</option>
                    <option value="3">部门主管</option>
                    <option value="4">组长</option>
                    <option value="5">员工</option>
                    
                </select>
            </p>
            <p>
                <input type="number" min="2500" placeholder="薪资" v-model.lazy.trim="objF.salary" required>
            </p>
            <p>
                <input type="date" placeholder="时期" v-model.lazy.trim="objF.ctime" required>
            </p>
            <article>
                <input type="submit" value="添加数据">
            </article>
        </form>
    </div>


    
   </div>
</template>

<script>
import {mapMutations} from 'vuex';

export default {
   
    name : 'AddPerson',
    data(){
        return{
            objF:{
              uname : '',
              gender:0,
              age : 18,
              port : '',
              salary : 2500,
              ctime : ''
            }
        }
    },
    methods:{
//利用扩展运算符，将mutations对象中的addlist属性提取出来使用
      ...mapMutations(['addlist']),

      addVuex(){
        let nowtime = new Date().getTime();
        let Ctime = new Date(this.objF.ctime).getTime();
        if(Ctime > nowtime){
          alert('录入的时间不得超过当前时间');
          return ;
        }
        //将数据objf整个提交给vuex内部的函数处理
        this.addlist(this.objF);

        //重置表单
        
        //传递数据后，返回查询页
        // this.$router.push('/home/listperson');
      }
    }
}


</script>

<style scoped>

.addperson{
    width: 100%;
    height: 100%;
    position: relative;
}
.addperson .addform{
    width: 60%;
    overflow: hidden;
    box-shadow: 0 0 0;
    border-radius: 8px;
    margin: 25px auto;
}
.addperson .addform p{
    width: 100%;
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: center;
}
.addperson .addform aside{
    width: 100%;
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: center;
    
}
.addperson .addform aside span{
    margin-left: 6px;
    margin-right: 30px;
    
}
.addperson .addform p input{
    width: 80%;
    height: 70%;
}
.addperson .addform p select{
    width: 80%;
    border-radius: 6px;
}
.AddPerson{
  width: 100%;
  height: 100%;
}
.AddPerson .Addform{
  width: 60%;
  overflow: hidden;
  box-shadow: 0px 0px 5px;
  border-radius: 8px;
  margin: 25px auto;
}
.AddPerson .Addform p,.AddPerson .Addform article{
  width: 100%;
  display: flex;
  justify-content: center;
  height: 50px;
  margin-top: 25px;
}
.AddPerson .Addform article input{
  width: 80%;
  height: 70%;
  margin-bottom: 30px;
}
.AddPerson .Addform aside{
  width: 100%;
  display: flex;
  align-items: center;
  height: 50px;
  justify-content: center;
}
.AddPerson .Addform aside span{
  margin-left: 6px;
  margin-right: 30px;
}
.AddPerson .Addform p input{
  width: 80%;
  height: 70%;
}
.AddPerson .Addform p select{
  width: 80%;
  border-radius: 6px;

}
</style>